<script>
import * as echarts from 'echarts'
import BaseChartVue from '@/components/BaseChart.vue'
import { hexToRgba, arrayGroupBy } from '@/lib/utils'
let len = 0
export default {
    name: 'percentPie',
    components: {},
    extends: BaseChartVue,
    props: {
        colorArr: {
            type: [Array, String],
            default: () => ['#0b82ff', '#dcf2f8', 'transparent'],
        },
        dataList: {
            type: [String, Number],
            default: () => 75.8,
        },
    },
    data() {
        return {
            time: null,
        }
    },
    computed: {},
    created() { },
    mounted() { },
    beforeDestroy() {
        // 清除定时器
        // this.stopShowTip()
    },
    methods: {
        makeOptions() {
            let option = {
                title: [{
                    show: true,
                    text: this.dataList + '%',
                    top: '39%',
                    left: '48%',
                    textAlign: 'center',
                    textStyle: {
                        color: '#333',
                        fontSize: 20,
                        fontWeight: 'bold',
                        // lineHeight: 60,
                    }
                }],
                tooltip: {
                    show: false
                },
                color: this.colorArr,
                series: [{
                    type: 'pie',
                    hoverAnimation: false,
                    radius: ['75%', '100%'],
                    avoidLabelOverlap: false,
                    startAngle: 180,
                    center: ['50%', '60%'],
                    label: {
                        normal: {
                            position: 'inner',
                            textStyle: {
                                color: '#fff',
                                fontSize: 12
                            }
                        },
                        emphasis: {
                            show: true,
                            textStyle: {
                                fontSize: '12',
                                fontWeight: 'bold'
                            }
                        }
                    },
                    labelLine: {
                        normal: {
                            show: false
                        }
                    },
                    data: [{
                        value: this.dataList,
                        emphasis: {disabled: true}
                    },
                    {
                        value: 100 - Number(this.dataList),
                        emphasis: {disabled: true}
                    },
                    {
                        value: 100,
                        emphasis: {disabled: true}
                    }]
                },

                ]
            };
            return option
        }
    },
}
</script>
